<template>
  <el-dialog
    v-model="props.open"
    title="Tips"
    width="500"
    :before-close="handleClose"
  >
    <span>This is a message</span>
    <h3>id: {{ props.id }}</h3>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="emit('update:open', false)">Cancel</el-button>
        <el-button type="primary" @click="emit('update:open', false)">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { nextTick } from "vue";

const props = defineProps({
  id: {
    type: String,
    default: ''
  },
  open: {
    type: Boolean,
    default: false,
  }
});
const emit = defineEmits(['update:open']);
const dialogVisible = ref(false);

const handleClose = () => {
  emit('update:open', false)
}

const getInfo = () => {
  console.log(props.id, '>>>')
}

const showModal = () => {
  dialogVisible.value = true;
  getInfo();
}

defineExpose({
  showModal,
})
</script>